<template>
  <div id="wrap" :style="{ height:screenHeight+'px'}" @touchmove.stop.prevent @mousewheel.prevent>
    <div id="main" :style="{ top: nowTop + 'px' }" >
      <ul id="pageUl">
        <li v-for="i in 3" :key='i' class="pageUlLi" :class="{'active': curIndex == i}" @click="toPage(i)">&nbsp;</li>
      </ul>

      <!-- 第一页内容 -->
      <div id="page1" class="page"  >

        <div class="page1" :class="{'bg_animation':curIndex==1}">

          <transition name="name-img1_1-transition"
          enter-active-class="in1_1"
          leave-active-class="out1_1">
          <div v-show="curIndex == 1">
            <label class="img1_1" >浙师大幼儿园小黄莺艺术学校</label>
          </div>
          </transition>

          <transition name="name-img1_2-transition"
          enter-active-class="in1_2"
          leave-active-class="out1_2">
            <img src="../../assets/img1_2.jpg" class="img1_2 in1_2" alt="室外环境"   v-show="curIndex == 1"/>

          </transition>

          <transition name="name-img1_3-transition"
          enter-active-class="in1_3"
          leave-active-class="out1_3">
          <img src="../../assets/img1_3.jpg" class="img1_3 in1_3" alt="室内环境" v-show="curIndex == 1" />
          </transition>
        </div>
      </div>

      <!-- 第二页内容 -->
      <div id="page2" class="page" >
        <div class="page2" :class="{'bg_animation':curIndex==2}">

              <!-- 三张图片 -->
              <transition name="name-img2_1-transition"
              enter-active-class="in2_1"
              leave-active-class="out2_1">
              <div v-show="curIndex==2">
                <img src="../../assets/img2_1.gif" class="img2_1"/>
              </div>
              </transition>

              <transition name="name-img2_2-transition"
              enter-active-class="in2_2"
              leave-active-class="out2_2">
              <div v-show="curIndex==2">
                <img src="../../assets/img2_1.gif" class="img2_2"/>
              </div>
              </transition>

              <transition name="name-img2_3-transition"
              enter-active-class="in2_3"
              leave-active-class="out2_3">
              <div v-show="curIndex==2">
                <img src="../../assets/img2_1.gif" class="img2_3"/>
              </div>

              </transition>
              <!-- 标题 -->
              <transition name="name-img2_4-transition"
              enter-active-class="in2_4"
              leave-active-class="out2_4">
              <div v-show="curIndex==2">
                <label class="img2_4"> 师资介绍</label>
              </div>
              </transition>

              <transition name="name-img2_5-transition"
              enter-active-class="in2_5"
              leave-active-class="out2_5">
                <div v-show="curIndex==2">
                  <div class="text_block" >
                    <p><span>师资力量雄厚，保教质量一流，现拥有省特级教师4人，省教学能手7人，市教书育人楷模、特级教师、学科带头人、教学能手、师德标兵等30余人。</span></p>
                    <p><span>教职工107名，77名教师中有专职外教4名，研究生10名，本科生35名全部具备上岗资格证书和教师资格证。</span></p>
                    <el-button type="primary" >查看更多+</el-button>
                  </div>
                </div>

              </transition>
        </div>

      </div>

      <!-- 第三页内容 -->
      <div id="page3" class="page" style="height: 80%;" >
        <div class="page3" :class="{'bg_animation':curIndex==3}">
              <transition
              enter-active-class="in3_1"
              leave-active-class="out3_1">
              <div v-show="curIndex==3">
                <label class="img3_1"> 优秀作品</label>
                <!-- <img src="../../assets/img3_1.gif" /> -->
              </div>
              </transition>

          <transition
              enter-active-class="in3_2"
              leave-active-class="out3_2">
              <div v-show="curIndex==3">
                <el-carousel :interval="4000" type="card" height="250px" arrow="never" indicator-position="none">
                <el-carousel-item v-for="item in imgList" :key="item.id">
                  <el-image :fit="fit" :src="item.url"></el-image>
                  </el-carousel-item>
                </el-carousel>
              </div>
              </transition>

        </div>
        <div class="page3_divider" ></div>

        <div class="page3_end" >
        <el-row :gutter="20" type="flex" align="middle" justify="center" >

        <el-col :span="12"  style="width: 100%;">
             <p><h1 style="color: #795DA3;">浙师大幼儿园小黄莺艺术学校</h1></p>
        </el-col>
            <el-col :span="1" style=" width: 33%;">
              <div class="address">
                <p><span>地址 Address</span></p>
                <p><span>xxxxxxxx</span></p>
              </div>


            </el-col>
            <el-col :span="1" style="  width: 33%;">
                <div class="tel">
                <p><span>电话 Tel</span></p>
                <p><span>xxxx-xxxxxxxx</span></p>
              </div>
            </el-col>
            <el-col :span="1" style="  width: 33%;">
                 <div class="email">
                <p><span>邮箱 E-mail</span></p>
                <p><span>xxxxxxx@126.COM</span></p>
              </div>
            </el-col>
            </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import img3_2 from '@/assets/img3_1.jpg'
  import img3_3 from '@/assets/img3_1.jpg'
  import img3_4 from '@/assets/img3_1.jpg'

  export default {
    data() {
      return {
        fit: 'fill',
        screenWeight: 0, // 屏幕宽度
        screenHeight: 0, // 屏幕高度
        index: 1, // 用于判断翻页
        curIndex: 1, // 当前页的index
        startTime: 0, // 翻屏起始时间
        endTime: 0, // 上一次翻屏结束时间
        nowTop: 0, // 翻屏后top的位置
        pageNum: 0, // 一共有多少页
        main: Object,
        obj: Object,
        imgList:[
          {
            id: 1,
            url:img3_2
          },
          {
            id: 2,
            url:img3_3
          },
          {
            id: 3,
            url:img3_4
          }
        ]
      }
    },
    mounted() {
      this.screenWeight = document.documentElement.clientWidth + 100;
      this.screenHeight = document.documentElement.clientHeight - 100;
      this.main = document.getElementById("main");
      this.obj = document.getElementsByTagName("div");
      for (let i = 0; i < this.obj.length; i++) {
        if (this.obj[i].className == 'page') {
          this.obj[i].style.height = this.screenHeight + "px";
        }
      }
      this.pageNum = document.querySelectorAll(".page").length;

      // 浏览器兼容
      if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
        document.addEventListener("DOMMouseScroll", this.scrollFun, false);
        document.body.addEventListener('touchmove', function(e) {
          e.preventDefault();
          e.stopPropagation();
        }, {
          passive: false
        });
      } else if (document.addEventListener) {
        document.addEventListener("mousewheel", this.scrollFun, false);
        document.body.addEventListener('touchmove', function(e) {
          e.preventDefault();
          e.stopPropagation();
        }, {
          passive: false
        });
      } else if (document.attachEvent) {
        document.attachEvent("onmousewheel", this.scrollFun);
        document.body.addEventListener('touchmove', function(e) {
          e.preventDefault();
          e.stopPropagation();
        }, {
          passive: false
        });
      } else {
        document.onmousewheel = this.scrollFun;
        document.body.addEventListener('touchmove', function(e) {
          e.preventDefault();
          e.stopPropagation();
        }, {
          passive: false
        });
      }
    },
    methods: {
      scrollFun(event) {
        this.startTime = new Date().getTime();
        // mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
        // DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
        let delta = event.detail || (-event.wheelDelta);
        // 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
        if ((this.startTime - this.endTime) > 1500) {
          if (delta > 0 && parseInt(this.main.offsetTop) >= -(this.screenHeight * (this.pageNum - 2))) {
            // 向下滚动

            this.index++;
            // this.curIndex = this.index;
            this.toPage(this.index);
          } else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {
            // 向上滚动
            this.index--;
            // this.curIndex = this.index;
            this.toPage(this.index);
          }
          // 本次翻页结束，记录结束时间，用于下次判断
          this.endTime = new Date().getTime();
        }
      },
      // 翻页
      toPage(index) {
        if (index != this.curIndex) {
          let delta = index - this.curIndex;

          // sleep(10);
          this.nowTop = this.nowTop - delta * this.screenHeight;
          this.curIndex = index;
          this.index = index;
          console.log(this.curIndex)
        }
      }


    }
  }
</script>

<style>
  #wrap {
    overflow: hidden;
    width: 100%;
    margin: 0;
    left: 0;
  }

  #main {
    position: relative;
    transition: top 2s;
  }

  .page {
    width: 100%;
    height: 100%;
  }
  .bg_animation{
    animation-name: pulse;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
  }

  .page .page1{
    width:100%;
    height:100%;
    background:url(../../assets/bg1.jpg) no-repeat;
    background-size: 100% 100%;
  }
  /* 图片样式 */
  .page .page1 .img1_1{
    width: 100%;
    height: 80px;
    top: 50px;
    /* right: 40%; */
    font-size: 50px;
    text-align: center;
    position: absolute;
  }
  .page .page1 .img1_2{
    width: 400px;
    height: 420px;
    top: 30%;
    left: 15%;
    position: absolute;
  }
  .page .page1 .img1_3{
    width: 400px;
    height: 420px;
    top: 30%;
    right: 15%;
    position: absolute;

  }

  /* 图片动画 */
  .page .page1 .in1_1{
    animation-name: fadeInDownBig;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 0.3s;
    animation-fill-mode:backwards;

  }
  .page .page1 .out1_1{
    animation-name: fadeOutUpBig;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 0s;
  }
  .page .page1 .in1_2{
    animation-name: fadeInUp;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 1.5s;
    animation-fill-mode:backwards;
  }
  .page .page1 .out1_2{
    animation-name: fadeOutDown;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 0s;
  }
  .page .page1 .in1_3{
    animation-name: fadeInUp;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 2s;
    animation-fill-mode:backwards;
  }
  .page .page1 .out1_3{
    animation-name: fadeOutDown;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 0s;
  }


  .page .page2{
    width:100%;
    height:100%;
    background:url(../../assets/bg2.jpg) no-repeat;
    background-size: 100% 100%;
  }

  .page .page2 .text_block{
    position: absolute;
    width: 630px;
    height: 350px;
    top: 300px;
    left: 120px;
  }
  .page .page2 .text_block .el-button:hover{
    background: #42B983;
  }
/* 三张图片 */
  .page .page2 .img2_1{
    width: 150px;
    height: 350px;
    top: 270px;
    right: 35%;
    position: absolute;
  }
  .page .page2 .img2_2{
    width: 150px;
    height: 350px;
    top: 170px;
    right: 23%;
    position: absolute;
  }
  .page .page2 .img2_3{
    width: 150px;
    height: 350px;
    top: 220px;
    right: 11%;
    position: absolute;
  }
  /* 标题 */
  .page .page2 .img2_4{
   width: 20%;
   height: 80px;
   top: 50px;
   right: 40%;
   font-size: 50px;
   text-align: center;
   position: absolute;
  }

  .page .page2 .in2_1{
    animation-name: fadeInDownBig;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 1.5s;
    animation-fill-mode:backwards;

  }
  .page .page2 .in2_2{
    animation-name: fadeInDownBig;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 2s;
    animation-fill-mode:backwards;

  }
  .page .page2 .in2_3{
    animation-name: fadeInDownBig;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 2.5s;
    animation-fill-mode:backwards;

  }
  .page .page2 .in2_4{
    animation-name: fadeInDownBig;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 0.3s;
    animation-fill-mode:backwards;

  }
  .page .page2 .in2_5{
    animation-name: fadeInLeftBig;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 1.5s;
    animation-fill-mode:backwards;

  }
  .page .page2 .out2_1{
     animation-name: fadeOutUpBig;
     animation-direction: normal;
     animation-duration: 1.5s;
     animation-delay: 0s;
  }
  .page .page2 .out2_2{
    animation-name: fadeOutUpBig;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 0s;
  }
  .page .page2 .out2_3{
    animation-name: fadeOutUpBig;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 0s;
  }
  .page .page2 .out2_4{
    animation-name: fadeOutUpBig;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 0s;
  }
  .page .page2 .out2_5{
    animation-name: fadeOutLeftBig;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 0s;
  }


  .page .page3{
    width:100%;
    height:80%;
    background:url(../../assets/bg3.jpg) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    z-index: 100;
  }
  .page .page3 .img3_1{
    width: 20%;
    height: 80px;
    top: 50px;
    right: 40%;
    font-size: 50px;
    text-align: center;
    position: absolute;
  }
  .page .page3 .in3_1{
    animation-name: fadeInDownBig;
    animation-direction: normal;
    animation-duration: 2s;
    animation-delay: 0.3s;
    animation-fill-mode:backwards;

  }
  .page .page3 .out3_1{
    animation-name: fadeOutUpBig;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 0s;
  }
  .page .page3 .in3_2{
    animation-name: fadeInDownBig;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 0.8s;
    animation-fill-mode:backwards;

  }
  .page .page3 .out3_2{
    animation-name: fadeOutUpBig;
    animation-direction: normal;
    animation-duration: 1.5s;
    animation-delay: 0s;
  }
  .page .page3 .el-carousel{
    width: 80%;
    margin: 200px 10%;
    /* background: #409EFF; */
  }
  .page .page3 .el-carousel__item{
    background: #303133;
    /* width: 245px; */
    /* height: 245px; */
    /* border-radius: 50%; */
    /* margin-left: 15%; */
  }
  .page .page3 .el-img{
    height: 100%;
    width: 100%;
  }


  .page .page3_divider{
    width: 100%;
    height: 20px;
    /* margin-bottom: 100px; */
    background: rgb(20,94,11);
    z-index: 3002;
    position: absolute;

  }
  .page .page3_end{
    height: 16%;
    width: 100%;
    text-align: center;
    /* background: #303133; */
  }

  .page .page3_end .el-row{
    width: 100%;
    height: 100%;
  }
  .page .page3_end .el-row .el-col{
    width: 100%;
    border-radius: 4px;
  }

 .page .page3_end img{
   /* margin-left: 30%; */

  }
  .page .page3_end p{
    color: rgb(20,94,11);
    text-align: start;
  }





  #pageUl {
    position: fixed;
    right: 10px;
    bottom: 50%;
    list-style: none;
    z-index: 1000;
  }

  .active {
    color: #42B983;
    background: #fff !important;
    width: 100px;
  }

  #pageUl li {
    width: 6px;
    height: 6px;
    border: 2px solid #939393;
    border-radius: 10px;
    margin: 10px;
    background: #8F8F8F;
  }

  #pageUl li:hover {
    background: #fff;
  }
</style>
